<template>
	<div>
		<div class="row">
			<div class="col-md-12">
				<div class="panel">
					<div class="panel-heading bk-bg-primary">
						<h6><i class="fa fa-indent red"></i>入库管理</h6>
					</div>
					<div class="panel-body">
						<form id="uploadForm" class="form-horizontal ">

							<br>
							<div class="form-group">
								<label class="col-md-3 control-label">账号别名</label>
								<div class="col-md-9">
									<select name="yys" class="form-control" size="1" v-model="alias">
										<option v-for="(opts, key) in carrierAlias.result" :value="opts.key">{{opts.value}}</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label" for="file">上传文件</label>
								<div class="col-md-9">
									<input type="file"  id="file" name="file" @change="cmccUpload">
								</div>
							</div>
							<br>
							<div class="form-group">
								<label class="col-md-3 control-label"></label>
								<div class="col-md-9">
									<!--<input type="button" name="previous" value="上传" class="btn btn-info button-previous">-->
									<a href="../card/template/cmcc" class="btn btn-success button-previous">下载移动模板</a>
								</div>
							</div>
							<div class="form-group" v-if="isMsg">
								<label class="col-md-3 control-label">上传结果</label>
								<div class="col-md-9">
									<div class="inCardTotal">总共上传 {{ cmccInCardMsg.totalRow }} 条，成功入库 <span>{{ cmccInCardMsg.updatedRow }}</span> 条</div>
									<ul class="inCardMsg">
										<li v-for="items in cmccInCardMsg.errorList">
											<div><span>影响行：</span>第{{ items.row }}行</div>
											<div><span>iccid：</span>{{ items.iccid }}</div>
											<div><span>卡号：</span>{{ items.msisdn }}</div>
											<div><span>错误信息：</span><i>{{ items.errorMsg }}</i></div>
										</li>
									</ul>
								</div>
							</div>
							<br>
						</form>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>
<script>

	import LscPage from '../../components/page_list.vue'
	import {mapGetters} from 'vuex'

	export default{
		name: 'incard',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				cmccInCardMsg: 'getCMCCInCardMsg',
				carrierAlias: 'getCarrierAlias'
			})
		},
		data () {
			return {
				isMsg: 0,
				alias: ''
			}
		},
		methods: {
			cmccUpload (event) {

				let file = event.target.files[0]
				let eccode = this.alias
				const formData = new FormData()
				formData.append('file', file)
				formData.append('eccode', eccode)

				this.$store.dispatch('fetchCmccInCard', formData)
			},
			downloadMoban() {
				this.$store.dispatch('fetchCmccMoban')

			}
		},
		mounted () {
			this.$store.dispatch('fetchCarrierAlias')

		},
		components: {
			LscPage
		},
		watch: {
			cmccInCardMsg (newval) {
				this.isMsg = 1
			}
		}
	}
</script>

<style>
	.inCardTotal {
		font-weight: 600;
		padding-top: 5px;
	}
	.inCardMsg {
		margin: 0;
		padding: 0;
	}
	.inCardMsg li {
		padding-top: 10px;
	}
	.inCardMsg li span {
		display: inline-block;
		width: 75px;
		text-align: left;
	}
	.inCardTotal span,
	.inCardMsg li i {
		font-style: normal;
		font-weight: 600;
		color: #ff2121;
	}
</style>